<template>
    <div class="cell-item">
        <LabelRow v-on:onMore="onMore" v-bind:label="label" v-bind:text="'共'+dataList.length+'条记录'"></LabelRow>
        <ul class="cell-ul">
            <div v-for="(item,index) in dataList" :key="index" class="cell-li">
                <div class="circle-tag">{{index+1}}</div>
                <div class="cell-label">
                    <div class="text-over flex flex1">
                        <span class="des1">{{item.handleInfo}}</span>
                    </div>
                </div>
                <div class="db-date">
                    <p class="db-num">
                        <a>{{item.count}}</a>
                        <span>件</span>
                    </p>
                    <p>
                        <span class="tx-status-text">已到期</span>
                    </p>
                    <!-- <button class="ignore-btn">
                        忽略
                    </button> -->
                </div>
            </div>
            <div v-if="!dataList.length" class="no-data">
                <img src="../../assets/no-data.png" alt="">
            </div>
        </ul>
    </div>
</template>
<script>
import LabelRow from "../common/labelRow.vue";
import { getMessage } from "../../config/api.js";
import Pubsub from "../../utils/pubsub";

export default {
    components: {
        LabelRow
    },
    data() {
        return {
            label: {
                url: require("../../assets/accreditionWorkbench/xxtx-icon.png"),
                label: "消息提醒"
            },
            dataList: []
        };
    },
    methods: {
        onMore() {
            console.log("onMore");
        },

        getList() {
            getMessage({ pageNum: 1, pageSize: 7 }).then((res = {}) => {
                this.dataList = res.rows;
            });
        }
    }, 
    created() {
        this.getList();
        this.pubsub_token1 = Pubsub.subscribe("MAKE_REMIND", () => {
            this.getList();
        });
    },
    destroyed() {
        this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
    }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.circle-tag {
    width: 26px;
    height: 26px;
    border-radius: 15px;
    background: #1a36a9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}
.default {
    background-color: #e60012;
}
.normal {
    background-color: #009944;
}
.tel {
    color: #1a36a9;
    margin-right: 3px;
}
.des1 {
    flex: 2;
}
.db-num {
    width: 45px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    a {
        color: #1a36a9;
        text-decoration: underline;
        margin-right: 3px;
    }
    span {
        // color: #888888;
    }
}
.db-date {
    display: flex;
    align-items: center;
    color: #888888;
}
.tx-status-text {
    color: #c23531;
    margin-right: 10px;
}
.ignore-btn {
    width: 40px;
    height: 20px;
    background-color: #c23531;
    color: #fff;
}
.warn-time {
    font-size: 14px;
    color: #888888;
}
</style>
